<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit"/>
    <title>{block name="title"} 敏捷开发管理系统-太阳软件{/block}</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    {include file="common/head_css" /}
    {:load_res('js','20180303',['/static/js/jquery/jquery.min.js','/static/admin/js/gdbase.js'])}
    <style>
        .total_price_change_zheng{color:#F00;}
        .total_price_change_fu{color:#0F0;}
        .box{margin-bottom:5px;border:none;}
    </style>
</head>
<body>
<div class="box" id="app">
    <form class="form-horizontal ajaxForm3" name="form0" method="post" action="{:url('')}">
        <input type="hidden" name="id" value="{$orderModel['id']}">
        <div class="modal-body">
            <table class="table" style="table-layout:fixed">
                <tbody>
            <tr>
                <td>商品合计</td>
                <td>{{ show_total_price }}</td>
            </tr>
            <tr>
                <td>加价或减价</td>
                <td>
                    <input type="text" :class="['form-control',(show_total_price_change > 0 ? 'total_price_change_zheng' : 'total_price_change_fu')]"
                           name="total_price_change" v-model.number="show_total_price_change" maxlength="10">
                </td>
            </tr>
            <tr>
                <td>原运费</td>
                <td>{{ dispatch_price }}</td>
            </tr>
            <tr>
                <td>运费调整</td>
                <td>
                    <input type="text" :class="['form-control',(show_dispatch_price_change > 0 ? 'total_price_change_zheng' : 'total_price_change_fu')]"
                           name="dispatch_price_change" v-model.number="show_dispatch_price_change" maxlength="10">
                    <a href="javascript:;" @click="noDispatchPrice">免运费</a>
                </td>
            </tr>
            <tr>
                <td>应付</td>
                <td style="color:green">{{ payable }}</td>
            </tr>
                <tr>
                    <td></td>
                    <td style="color:red;">改价后价格不能小于0元</td>
                </tr>
            </tbody>
            </table>
            <div class="form-group">
                <div class="col-xs-12 col-sm-9 col-md-8 col-lg-8">
                    <div class="form-control-static">
                        <b>购买者信息</b>
                        {if(!empty($orderModel['address']))}
                        {$orderModel['address']['province']} {$orderModel['address']['city']} {$orderModel['address']['area']}
                        {$orderModel['address']['address']} {$orderModel['address']['realname']} {$orderModel['address']['mobile']}
                        {else /}
                        无收货信息
                        {/if}
                        <br>
                        <b>买家实付</b> = 商品合计 + 涨价或减价 + 运费 + 运费调整
                        <br>
                        <br>
                        <b><span style="color:red">*</span>该订单最多支持99次改价，您已经修改 <span style="color:red">4</span> 次<br>
                        </b></div><b>
                </b></div><b>
            </b></div><b>
        </b></div>
        <!-- /.box-body -->
        <div class="box-footer">
            <div class="row">
                <div class="col-xs-4"></div>
                <button type="submit" class="btn btn-info ladda-button col-xs-1" data-style="expand-left" data-plugin="ladda">
                    <span class="ladda-label"><i class="icon wb-arrow-expand margin-right-10" aria-hidden="true"></i>提交</span>
                </button>
                <div class="col-xs-1"></div>
                <a href="javascript:parent.layer.closeAll();" class="btn btn-default col-xs-1">返回</a>
            </div>
        </div>
        <!-- /.box-footer -->
    </form>
</div>
{include file="common/footer_js" /}
<script src="https://cdn.staticfile.org/vue/2.5.16/vue.min.js"></script>
<script>
    function complete3(data) {
        if (data.code == 1) {
            layer.msg(data.msg, {icon: 6}, function (index) {
                layer.close(index);
                parent.location.reload();
                parent.layer.closeAll();
            });
        } else {
            layer.alert(data.msg, {icon: 5}, function (index) {
                $("#verify").val('');
                $("#verify_img").click();
                Ladda.stopAll();
                layer.close(index);
            });
        }
    }
</script>
<script>
    $(function () {
        setTimeout(resetHeight,1000);
        // 再次设置，防止出错
        setTimeout(resetHeight,5000);
    })
    function resetHeight() {
        console.log('resetHeight')
        if (parent != this) {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.iframeAuto(index); // 适配高度
        }
    }
</script>
<script>
    var vmPage = new Vue({
        el: '#app',
        data: {
            total_price:{$orderModel['original_total_price']}
            ,total_price_change:{$orderModel['total_price_change']|default=0}
            ,dispatch_price:{$orderModel['original_dispatch_price']|default=0}
            ,dispatch_price_change:{$orderModel['dispatch_price_change']|default=0}
            ,show_total_price_change:0
            ,show_dispatch_price_change:0
        }
        ,
        created:function () {
            this.show_total_price_change = (this.total_price_change / 100).toFixed(2);
            this.show_dispatch_price_change = (this.dispatch_price_change / 100).toFixed(2);
        }
        ,
        watch:{
            total_price_change:function (newValue, oldValue) {
                var that = this;
                if(newValue < 0 && Math.abs(newValue) > that.total_price){
                    that.total_price_change = -that.total_price;
                }
                if(newValue > 99999999){
                    that.total_price_change = 99999999;
                }
            }
            ,
            dispatch_price_change:function (newValue, oldValue) {
                var that = this;
                if(newValue < 0 && Math.abs(newValue) > that.dispatch_price){
                    that.dispatch_price_change = -that.dispatch_price;
                }
                if(newValue > 9999){
                    that.dispatch_price_change = 9999;
                }
            }
            , show_total_price_change:function (newValue, oldValue) {
                var that = this;
                if(newValue < 0 && Math.abs(newValue) > that.total_price){
                    that.show_total_price_change = -that.total_price;
                }
                if(newValue > 99999999){
                    that.show_total_price_change = 99999999;
                }

                that.total_price_change = that.show_total_price_change * 100;
            }
            ,show_dispatch_price_change:function (newValue, oldValue) {
                var that = this;
                if(newValue < 0 && Math.abs(newValue) > that.dispatch_price){
                    that.show_dispatch_price_change = -that.dispatch_price;
                }
                if(newValue > 99999999){
                    that.show_dispatch_price_change = 99999999;
                }

                that.dispatch_price_change = that.show_dispatch_price_change * 100;
            }
        }
        ,
        methods:{
            noDispatchPrice:function () {
                this.dispatch_price_change = -this.dispatch_price;
            }
        }
        ,
        computed:{
            payable:function () {
                return ((this.total_price + this.total_price_change + this.dispatch_price + this.dispatch_price_change) / 100).toFixed(2);
            }
            ,
            show_total_price:function () {
                return (this.total_price / 100).toFixed(2);
            }
        }
    })
</script>
</body>
</html>